<template>
	<div>
        <mj-title type="h2" title="Carousel 走马灯"></mj-title>
        <div class="page-desc">用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。</div>

        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
				<mj-carousel @change="carouselChange" v-model="carouselActive">
					<mj-carousel-item v-for="item in 5" :key="item">
						<div class="demo-carousel">{{item}}</div>
					</mj-carousel-item>
				</mj-carousel>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
	&lt;mj-carousel @change="carouselChange" v-model="carouselActive"&gt;
		&lt;mj-carousel-item v-for="item in 5">
			&lt;div class="demo-carousel">{item}&lt;/div>
		&lt;/mj-carousel-item>
	&lt;/mj-carousel>
&lt;/template>
&lt;script>
export default {
	methods:{
		carouselChange(index) {
			console.log('carousel切换当前位置',index)
		},
	}
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="自动切换"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
				<mj-carousel loop autoplay>
					<mj-carousel-item>
						<div class="demo-carousel" style="background:rgba(60,104,165,1)">1</div>
					</mj-carousel-item>
					<mj-carousel-item>
						<div class="demo-carousel" style="background:rgba(60,104,165,.8)">2</div>
					</mj-carousel-item>
					<mj-carousel-item>
						<div class="demo-carousel" style="background:rgba(60,104,165,.6)">3</div>
					</mj-carousel-item>
					<mj-carousel-item>
						<div class="demo-carousel" style="background:rgba(60,104,165,.4)">4</div>
					</mj-carousel-item>
				</mj-carousel>
				<ul class="page-list">
					<li>设置<code>autoplay</code>自动切换，需要和<code>loop</code>配合使用</li>
				</ul>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
	&lt;mj-carousel loop autoplay>
		&lt;mj-carousel-item>
			&lt;div class="demo-carousel" style="background:rgba(60,104,165,1)">1&lt;/div>
		&lt;/mj-carousel-item>
		&lt;mj-carousel-item>
			&lt;div class="demo-carousel" style="background:rgba(60,104,165,.8)">2&lt;/div>
		&lt;/mj-carousel-item>
		&lt;mj-carousel-item>
			&lt;div class="demo-carousel" style="background:rgba(60,104,165,.6)">3&lt;/div>
		&lt;/mj-carousel-item>
		&lt;mj-carousel-item>
			&lt;div class="demo-carousel" style="background:rgba(60,104,165,.4)">4&lt;/div>
		&lt;/mj-carousel-item>
	&lt;/mj-carousel>
&lt;/template>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="综合设置"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
				<mj-form label-width="120px">
				    <mj-form-item label="自动切换">
						<mj-switch v-model="setting.autoplay"></mj-switch>
				    </mj-form-item>
				    <mj-form-item label="指示器位置">
				    	<mj-radio-group :data="dotsData" v-model="setting.dots" type="button"></mj-radio-group>
				    </mj-form-item>
				    <mj-form-item label="前进后退按钮">
				    	<mj-radio-group :data="arrowData" v-model="setting.arrow" type="button"></mj-radio-group>
				    </mj-form-item>
				    <mj-form-item label="指示器触发方式">
				    	<mj-radio-group :data="triggerData" v-model="setting.trigger" type="button"></mj-radio-group>
				    </mj-form-item>
				</mj-form>
				<mj-carousel :dots="setting.dots" :arrow="setting.arrow" :trigger="setting.trigger" :autoplay="setting.autoplay" loop>
					<mj-carousel-item v-for="item in 4" :key="item">
						<div class="demo-carousel">{{item}}</div>
					</mj-carousel-item>
				</mj-carousel>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
	&lt;mj-form label-width="120px">
	    &lt;mj-form-item label="自动切换">
			&lt;mj-switch v-model="setting.autoplay">&lt;/mj-switch>
	    &lt;/mj-form-item>
	    &lt;mj-form-item label="指示器位置">
	    	&lt;mj-radio-group :data="dotsData" v-model="setting.dots" type="button">&lt;/mj-radio-group>
	    &lt;/mj-form-item>
	    &lt;mj-form-item label="前进后退按钮">
	    	&lt;mj-radio-group :data="arrowData" v-model="setting.arrow" type="button">&lt;/mj-radio-group>
	    &lt;/mj-form-item>
	    &lt;mj-form-item label="指示器触发方式">
	    	&lt;mj-radio-group :data="triggerData" v-model="setting.trigger" type="button">&lt;/mj-radio-group>
	    &lt;/mj-form-item>
	&lt;/mj-form>
	&lt;mj-carousel :dots="setting.dots" :arrow="setting.arrow" :trigger="setting.trigger" :autoplay="setting.autoplay" loop>
		&lt;mj-carousel-item v-for="item in 4" >
			&lt;div class="demo-carousel">{item}&lt;/div>
		&lt;/mj-carousel-item>
	&lt;/mj-carousel>
&lt;/template>
&lt;script>
export default {
  data() {
    return {
      dotsData:[
        {text: '内部', value: 'inside'},
        {text: '外部', value: 'outside'},
        {text: '不显示', value: 'none'},
      ],
      arrowData:[
        {text: '悬停', value: 'hover'},
        {text: '一直显示', value: 'always'},
        {text: '不显示', value: 'never'},
      ],
      triggerData:[
        {text: 'click', value: 'click'},
        {text: 'hover', value: 'hover'},
      ],
      setting: {
        autoplay:false,
        dots:'inside',
        arrow:'hover',
        trigger:'click',
      }
    }
  }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h6" title="Carousel 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>model-value</td>
            		<td>幻灯片的索引，从 1 开始，可以使用 v-model 双向绑定数据</td>
            		<td>Number</td>
            		<td>1</td>
            	</tr>
            	<tr>
            		<td>loop</td>
            		<td>是否开启循环</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
            	<tr>
            		<td>autoplay</td>
            		<td>是否自动切换</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
            	<tr>
            		<td>delay</td>
            		<td>自动切换的时间间隔，单位ms</td>
            		<td>Number</td>
            		<td>3000</td>
            	</tr>
            	<tr>
            		<td>trigger</td>
            		<td>指示器的触发方式，可选值为 click（点击），hover（悬停）</td>
            		<td>String</td>
            		<td>click</td>
            	</tr>
            	<tr>
            		<td>height</td>
            		<td>走马灯的高度，可填具体高度数值，单位 px</td>
            		<td>String</td>
            		<td>-</td>
            	</tr>
            	<tr>
            		<td>dots</td>
            		<td>指示器的位置，可选值为 inside （内部），outside（外部），none（不显示）</td>
            		<td>String</td>
            		<td>inside</td>
            	</tr>
            	<tr>
            		<td>arrow</td>
            		<td>切换箭头的显示时机，可选值为 hover（悬停），always（一直显示），never（不显示）</td>
            		<td>String</td>
            		<td>hover</td>
            	</tr>
            </tbody>
        </table>

		<mj-title type="h6" title="Carousel 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>回调</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>change</td>
					<td>幻灯片切换时触发，返回当前激活index</td>
					<td>index</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	data() {
		return {
			carouselActive:1,
			dotsData:[
                {label: '内部', value: 'inside'},
                {label: '外部', value: 'outside'},
                {label: '不显示', value: 'none'},
			],
			arrowData:[
                {label: '悬停', value: 'hover'},
                {label: '一直显示', value: 'always'},
                {label: '不显示', value: 'never'},
			],
			triggerData:[
                {label: 'click', value: 'click'},
                {label: 'hover', value: 'hover'},
			],
			setting: {
				autoplay:false,
				dots:'inside',
				arrow:'hover',
				trigger:'click',
			}
		}
	},
	methods:{
		carouselChange(index) {
			console.log('carousel切换当前位置',index)
		},


	},
}
</script>

<style scoped>
.page-list {margin-top: 10px;}
.demo-carousel {
    height: 200px;
    line-height: 200px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    background: #506b9e;
}
.mj-swiper-slide:nth-child(even) .demo-carousel {
	background: #8d94a3
}
</style>